<template>
  <div class="app">
     <!--搜索-->
        <el-row>
            <el-col :span="4"><el-select v-model="province" clearable placeholder="请选择省份" @change="sarchcitys">
                <el-option
                v-for="item in provinces"
                :key="item.baseAreaid"
                :label="item.name"
                :value="item.baseAreaid">
                </el-option>
            </el-select></el-col>
            <el-col :span="4"><el-select v-model="city" clearable placeholder="请选择城市" @change="sarcprop">
                <el-option
                v-for="item in citys"
                :key="item.baseAreaid"
                :label="item.name"
                :value="item.baseAreaid">
                </el-option>
            </el-select></el-col>
            <el-col :span="4"><el-input v-model="tname" size="mini" placeholder="请输入门店名称"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <!--分页列表显示-->
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :default-sort = "{prop: 'id', order: 'descending'}"
                    height="450px">

                <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="省份">
                        <span>{{ props.row.proName }}</span>
                    </el-form-item>
                    <el-form-item label="城市">
                        <span>{{ props.row.citName }}</span>
                    </el-form-item>
                    <el-form-item label="县(区)">
                        <span>{{ props.row.areName }}</span>
                    </el-form-item>
                    <el-form-item label="门店名称">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="地址">
                        <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="经度">
                        <span>{{ props.row.longitude }}</span>
                    </el-form-item>
                    <el-form-item label="维度">
                        <span>{{ props.row.dimensionality }}</span>
                    </el-form-item>
                    <el-form-item label="添加时间">
                        <span>{{ props.row.addtimeStr }}</span>
                    </el-form-item>
                    </el-form>
                </template>
                </el-table-column>

                <el-table-column
                        prop="id"
                        label="门店编号"
                        sortable>
                </el-table-column>
                <el-table-column
                        prop="proName"
                        label="省份"
                        column-key="date"
                        :filters="[]"
                        :filter-method="filterHandler">
                </el-table-column>
                <el-table-column
                        prop="citName"
                        label="城市">
                </el-table-column>
                <el-table-column
                        prop="areName"
                        label="县（区）">
                </el-table-column>
                <!-- prop="ishot"
                     label="是否是常用门店：1：常用"> -->
                <el-table-column    
                        prop="ishot"
                        label="是否是常用门店">
                        <template slot-scope="scope">
                            <el-switch
                            v-model="scope.row.ishot"
                            @change='changIshot($event,scope.row.ishot,scope.row.id)'
                            active-color="#13ce66"
                            inactive-color="#DCDFE6"
                            :active-value="1"
                            :inactive-value="0"
                            >
                            </el-switch>
                        </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="门店名称">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <!-- <el-table-column
                        prop="longitude"
                        label="经度">
                </el-table-column>
                <el-table-column
                        prop="dimensionality"
                        label="维度">
                </el-table-column> -->
                <el-table-column
                        prop="addtimeStr"
                        label="添加时间">
                </el-table-column>
                <el-table-column label="操作" width="150px" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <!--添加和更新 弹框-->
        <el-row>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    
                     <!-- <el-form-item label="地址:"> -->
                         <!-- <el-cascader  v-model="form.arrayList" :options="options" clearable></el-cascader> -->
                        <!-- <div class="block">
                        <span class="demonstration">地址:</span>
                        <el-cascader
                            placeholder="搜索："
                            :options="options"
                            filterable
                            clearable
                            v-model="form.arrayList"></el-cascader>
                        </div> -->

                        <el-select v-model="form.provinceId" clear @change="proA" placeholder="请选择省份" size=mini>
                            <el-option
                            v-for="item in provincesA"
                            :key="item.baseAreaid"
                            :label="item.name"
                            :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                        <el-select v-model="form.city_Id" @change="proB" placeholder="请选择城市" size=mini>
                            <el-option
                            v-for="item in provincesB"
                            :key="item.baseAreaid"
                            :label="item.name"
                            :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                        <el-select v-model="form.areaId" clearable @change="proC" placeholder="请选择区县" size=mini>
                            <el-option
                            v-for="item in provincesC"
                            :key="item.baseAreaid"
                            :label="item.name"
                            :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                    <!-- <el-form-item label="是否是常用门店：1：常用" >
                        <el-input v-model="form.ishot" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item label="是否是常用门店：:" >
                            <el-radio-group v-model="form.ishot" size="medium">
                            <el-radio border :label="1">是</el-radio>
                            <el-radio border :label="0">不是</el-radio>
                            </el-radio-group>
                    </el-form-item>
                    <el-form-item label="门店名称" >
                        <el-input v-model="form.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" >
                        <el-input v-model="form.address" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="经度" >
                        <el-input v-model="form.longitude" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="维度" >
                        <el-input v-model="form.dimensionality" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdate">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
  </div>
</template>
<script>
import carInsuranceVue from './carInsurance.vue';
export default {
      data() {
        return {
               tableData:[],
                currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                provinces:[],//查询功能
                province:'',
                citys:[],
                city:'',
                tname:'',
                parentid:0,
                dialogFormVisible:false,
                title:'门店添加',
                form:{},
                provincesA:[],
                provincesB:[],
                provincesC:[],
                // options:[]
          }
      },
       created:function(){
               //初始化
                this.loadData();
                this.loadIndex();
                this.loadProvinces();
                this.loadProvincesA();
            },
            // /api/cars/baseArea/queryList
            methods:{
                // 门店添加时查询地区
                // loadAddCitys(){
                //     //获取数据
                //     this.$http.post("/api/cars/baseArea/queryList").then((response) => {
                //         console.log(response);
                //         if(response.data.code==2000){
                //             this.options = response.data.data;
                //         }
                //     })
                // },
                filterHandler(value, row, column) {
                    const property = column['property'];
                    return row[property] === value;
                },
                //加载数据
                loadData(){
                   //获取数据
                          this.$http.post("/api/cars/shop/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            name:this.tname,
                                            city_Id:this.city,
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                                  var arrayList = new Array(response.data.data.provinceId,response.data.data.city_Id,response.data.data.areaId);
                                                this.form.arrayList = arrayList;
                                              }
                                })  
                        
                },
                loadIndex(){
                   //获取数据
                          this.$http.post("/api/cars/shop/queryAlls",{
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                //   this.tableData = response.data.data.list;
                                                //   this.total = response.data.data.total;
                                                var arrayList = new Array(response.data.data.list.provinceId,response.data.data.list.city_Id,response.data.data.list.areaId);
                                                this.form.arrayList = arrayList;
                                              }
                                })  
                        
                },
                //加载省份
                loadProvinces(){
                    //获取数据
                    this.$http.post("/api/cars/baseArea/quallAllBase",{
                        parentid:this.parentid,
                    }).then((response) => {
                        console.log(response);
                        if(response.data.code==2000){
                            this.provinces = response.data.data;
                            this.province = response.data.data.name;
                        }
                    })
                },
                //加载城市
                loadcitys(){
                    this.citys=[];
                    this.city='';
                    if(this.province==null||this.provinces==0||this.provinces==""){
                        return false;
                    }
                    //获取数据
                    this.$http.post("/api/cars/baseArea/quallAllBase",{
                        parentid:this.province,
                    }).then((response) => {
                        console.log(response);
                        if(response.data.code==2000){
                            this.citys = response.data.data;
                            this.city = this.citys[0].name;
                        }
                    })
                },
                //加载省份
                loadProvincesA(){
                    //获取数据
                    this.$http.post("/api/cars/baseArea/quallAllBase",{
                        parentid:0,
                    }).then((response) => {
                        console.log(response);
                        if(response.data.code==2000){
                            this.provincesA = response.data.data;
                        }
                    })
                },
                //加载城市
                loadProvincesB(){
                    this.provincesB=[];
                    // this.form.baseAreaidC='';
                    //获取数据
                    this.$http.post("/api/cars/baseArea/quallAllBase",{
                        parentid:this.form.provinceId,
                    }).then((response) => {
                        console.log(response);
                        if(response.data.code==2000){
                            this.provincesB = response.data.data;
                            this.form.city_Id = this.provincesB[0].name;
                        }
                    })
                },
                //加载区县
                loadProvincesC(){
                    // this.provincesC=[];
                    //获取数据
                    this.$http.post("/api/cars/baseArea/quallAllBase",{
                        parentid:this.form.city_Id,
                    }).then((response) => {
                        console.log(response);
                        if(response.data.code==2000){
                            this.provincesC = response.data.data;
                        }
                    })
                },
                //常用城市状态开关改变
                        changIshot($event,num,bid){
                            console.log(bid);
                            console.log($event);
                            console.log(num);
                            var _this = this;
                            //定义json对象
                            var jsons = {
                                id:bid,
                                ishot:num
                            }
                            this.$http({
                                url:'/api/cars/shop/update',
                                method:'post',
                                data:jsons,
                                header:{
                                'Content-Type':'application/json'  //如果写成contentType会报错
                                }
                            }).then(function (response) {
                                    console.log("=========");
                                    console.log(response);
                                    if(response.data.code==2000){
                                        console.log("是否是常用门店状态改变成功");
                                    }else{
                                        console.log("是否是常用门店状态改变失败");
                                    }
                                })
                                .catch(function (error) {
                                    //失败处理
                                    console.log(error);
                                    console.log("==========");
                                });
                        },
                //各种绑定事件方法
                //每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                   /* axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize: this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //当前页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                    /*axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize:this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //查询方法
                search(){
                   this.loadData();        
                },
                //城市方法查询
                sarchcitys(){
                    this.loadcitys();
                },
                //查询城市门店
                sarcprop(){
                    this.loadData();
                },
                proA(){
                    this.loadProvincesB();
                },
                proB(){
                    this.loadProvincesC();
                },
                proC(){

                },
                //处理添加
                handleAdd(){
                    //清空原来form
                    this.form={};
                    //更新显示名称
                    this.title="门店添加";
                    //对话框显示
                    this.dialogFormVisible=true;
                    this.loadAddCitys();
                },
                //处理编辑（弹出汽车更新对话框）
                handleEdit(index, row) {
                    console.log(index, row);
                    //{deptNo:10,dname:'ACCOUNTING',loc:'纽约'}
                    this.form=row;
                    //更新显示名称
                    this.title="门店更新";
                    //对话框显示
                    this.dialogFormVisible=true;
                    // this.options=row;
                    this.loadProvincesA();
                    this.loadProvincesB();
                    this.loadProvincesC();
                    // this.form.provinceId = row.provinceId;
                    // this.form.city_Id  = row.city_Id;
                    // this.form.areaId = row.areaId;
                    this.form.provinceId = row.proName;
                    this.form.city_Id  = row.citName;
                    this.form.areaId = row.areName;
                },

                //提交表单数据（添加或者更新）
                addOrUpdate(){
                    var  url ='/api/cars/shop/update';
                    if(this.form.id==''||this.form.id==null){
                        url="/api/cars/shop/insert"
                    }
                   var _this=this;
                    //提交方法
                    this.$http.post(url, this.form)
                        .then(function (response) {
                            console.log(response);
                            //提交成功
                            if(response.data.code==2000){
                                //关闭弹出框
                                _this.dialogFormVisible=false;
                                //提示更新成功
                                _this.$message({
                                  //  message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            _this.$message.error('错了哦，这是一条错误消息');
                        });
                },
                //处理删除（ 汽车删除）
                handleDelete(index, row) {
                    console.log(index, row);
                   var _this=this;
                    //确认弹框
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //执行删除
                        this.$http.delete('/api/cars/shop/deleteById?id='+row.id)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                }
            }
    }
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
